
.box {
  background: url("assets/tmp/img/bi/backgroundImg.png") no-repeat;
  background-size: 100% 100%;
  height: 100%;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: '宋体';
  //font-family: 'PingFang-SC-Regular';
}

.box:focus {
  outline: none;
}

.borders {
  background: url("assets/tmp/img/bi/selectOff.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 763px;
  width: 1178px;
  position: fixed;
  .borders-son {
    height: 763px;
    width: 1178px;
    position: fixed;
    z-index: 100;
  }
  &:nth-child(1) {
    top: 16%;
    left: 19%;
  }
  &:nth-child(2) {
    top: 16%;
    left: 51%;
  }
  &:nth-child(3) {
    top: 55%;
    left: 2%;
  }
  &:nth-child(4) {
    top: 55%;
    left: 34.5%;
  }
  &:nth-child(5) {
    top: 55%;
    left: 67%;
  }
  &:hover {
    background: url("assets/tmp/img/bi/selectOn.png") no-repeat transparent;
    .son-b {
      color: #000103;
      font-weight: 700;
    }
    .borders-son {
      background: url("assets/tmp/img/bi/selectOnSon.gif") no-repeat transparent;
      background-size: 100% 100%;
    }
  }
}

.system-point {
  background: url("assets/tmp/img/bi/backPoint.gif") no-repeat transparent;
  background-size: 100% 100%;
  height: 31px;
  width: 667px;
  position: fixed;
  top: 52%;
}

.system-cloud {
  background: url("assets/tmp/img/bi/backCloud.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 2160px;
  width: 3840px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
  animation: spin 25s linear infinite;
}

.system-triangle {
  background: url("assets/tmp/img/bi/backTriangle.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 200px;
  width: 203px;
  position: fixed;
  bottom: -2%;
  right: 33%;
  transform: translate3d(0, 0, 0);
  animation: spin 5s linear infinite;
}

.system-circle {
  background: url("assets/tmp/img/bi/backCircle.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 398px;
  width: 391px;
  position: fixed;
  top: 9%;
  left: 15%;
  transform: translate3d(0, 0, 0);
  animation: spin 5s linear infinite;
}

.main {
  position: fixed;
  height: 1080px;
  width: 1920px;
  display: block;
  transform: scale(0.578);
  &:nth-child(1) {
    transform-origin: 4% 9%;
  }
  //&:nth-child(2) {
  //  transform-origin: 193% 85%;
  //}
  //&:nth-child(3) {
  //  transform-origin: 381% 85%;
  //}
  //&:nth-child(4) {
  //  transform-origin: 98% 330%;
  //}
  //&:nth-child(5) {
  //  transform-origin: 292% 330%;
  //}
  //&:hover {
  //  .son {
  //    border: 4px solid #53f2f8;
  //  }
  //  .son-b {
  //    color: #53f2f8;
  //  }
  //}
}

.son {
  position: fixed;
  height: 100%;
  width: 100%;
  border: 4px solid #07a1e4;
  box-sizing: content-box;
}

.son-a {
  position: fixed;
  height: 763px;
  width: 1178px;
  display: block;
  border: 0;
  z-index: 1000;
}

.son-b {
  position: fixed;
  bottom: -16.3%;
  width: 100%;
  font-size: 98px;
  text-align: center;
  color: #fff;
}

.main-title {
  margin-top: 56px;
  font-size: 145px;
  text-align: center;
  position: fixed;
  width: 100%;
  color: #fefefc;
}

.main-subhead {
  font-size: 52px;
  text-align: center;
  position: fixed;
  top: 1%;
  right: 1%;
  font-family: 'Microsoft YaHei UI';
  //color: #36bac0;
  color: #f1fa05;
}

.main-subhead-pic {
  background: url("assets/tmp/img/bi/3dTypeface.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 97px;
  width: 389px;
  position: fixed;
  top: 1%;
  right: 1%;
  //font-family: 'Microsoft YaHei UI';
  //color: #36bac0;
  //color: #f1fa05;
}

.main-copy {
  font-size: 28px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-family: 'Microsoft YaHei UI';
  //color: #36bac0;
  color: #f1fa05;
}
